<template>
	<div>
		<main-content
			v-if="!showDetail"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.apply_time')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="formTime.time"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.lock_status')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.lockStatus"
							style="width: 180px"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-for="item in lockOrderType"
								:key="item.code"
								:label="item.description"
								:value="Number(item.code)"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						class="flex-row-container"
						label-width="61px"
					>
						<el-input
							v-model="queryData.eventId"
							clearable
							size="medium"
							style="width: 330px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t('common.withdraw_money_wallet')}:`
						"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.walletType"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
							style="width: 220px;"
						>
							<el-option
								:label="$t('common.cash_wallet')"
								value="17"
							></el-option>
							<el-option
								:label="$t('common.earnings_wallet')"
								value="21"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.proxy_name')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.userName"
							clearable
							v-input="{ name: 'num_alp' }"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>

					<el-form-item
						:label="`${$t('funds.fund_audit.review_status')}:`"
						class="flex-row-container"
						label-width="105px"
					>
						<el-select
							v-model="queryData.auditStatus"
							style="width: 180px"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option label="待出款" :value="7" />
							<el-option label="处理中" :value="14" />
							<el-option label="出款成功" :value="11" />
							<el-option label="出款取消" :value="12" />
							<el-option label="出款失败" :value="13" />
						</el-select>
					</el-form-item>
					<el-form-item
						:label="
							`${$t('funds.fund_audit.third_withdraw_status')}:`
						"
						class="flex-row-container"
						label-width="105px"
					>
						<el-select
							v-model="queryData.thirdOrderStatus"
							style="width: 180"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option label="出款成功" :value="0" />
							<el-option label="出款失败" :value="1" />
							<el-option label="未知" :value="2" />
							<el-option label="处理中" :value="3" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="审核员:">
						<el-input
							v-model="queryData.lockAccount"
							clearable
							size="medium"
							style="width: 330px"
							:placeholder="$t('common.please_enter')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item> -->
					<!-- <el-form-item
						v-if="activeName === '4'"
						:label="
							`${$t('funds.fund_audit.third_message_status')}:`
						"
					>
						<el-select
							v-model="queryData.thirdMessageStatus"
							style="width: 180px"
							:popper-append-to-body="false"
						>
							<el-option
								:label="$t('common.all')"
								value=""
							></el-option>
							<el-option
								v-for="item in withdrawThirdMessageStatus"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							:loading="loading"
							:disabled="loading"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
				<div class="divBox">
					<p class="danger data-refresh">
						{{ $t('funds.fund_audit.data_update_time') }}：
						{{ now }}
					</p>
					<el-select
						v-model="activeWithdrawal"
						size="mini"
						:placeholder="$t('common.please_choose')"
						@change="recordTime"
					>
						<el-option
							v-for="item in timeList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
			</template>
			<template slot="content">
				<div
					v-if="
						hasPermission('407041') ||
							hasPermission('407042') ||
							hasPermission('407043') ||
							hasPermission('407044')
					"
				>
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane
							v-if="hasPermission('407041')"
							:label="$t('funds.fund_audit.wait_audit_1')"
							name="1"
						></el-tab-pane>
						<el-tab-pane
							v-if="hasPermission('407042')"
							:label="$t('funds.fund_audit.wait_audit_2')"
							name="2"
						></el-tab-pane>
						<el-tab-pane
							v-if="hasPermission('407043')"
							:label="$t('funds.fund_audit.wait_audit_3')"
							name="3"
						></el-tab-pane>
						<el-tab-pane
							v-if="hasPermission('407044')"
							:label="$t('funds.fund_audit.waiting_pay')"
							name="4"
						></el-tab-pane>
					</el-tabs>
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						class="small-size-table"
						:data="dataList"
						:max-height="tableHeight"
						highlight-current-row
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.lock')"
							width="60"
						>
							<template slot-scope="scope">
								<template
									v-if="!isFinishAuditStatus(scope.row)"
								>
									<el-checkbox
										v-if="hasPermission('407045')"
										v-model="scope.row.lockOrder"
										:disabled="!showLock(scope.row)"
										@change="lockChange(scope.row)"
									></el-checkbox>
								</template>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.actions')"
							width="180"
						>
							<template slot-scope="scope">
								<!-- scope.row.lockStatus !== 1 ||
										((!!scope.row.lockAccountId &&
											userInfo.id !==
												+scope.row.lockAccountId) ||
											(!scope.row.lockAccountId &&
												scope.row.lockAccount !==
													userName)) -->
								<el-button
									v-if="activeName !== '4'"
									:class="!isMyAudit(scope.row) ? 'dis' : ''"
									type="primary"
									size="medium"
									@click="goDetail(scope.row)"
								>
									{{ $t('funds.fund_audit.audit') }}
								</el-button>
								<template v-else>
									<!--
										scope.row.lockStatus !== 1 ||
												((!!scope.row.lockAccountId &&
													userInfo.id !==
														+scope.row
															.lockAccountId) ||
													(!scope.row.lockAccountId &&
														scope.row
															.lockAccount !==
															userName))
									 -->
									<el-link
										v-if="hasPermission('407047')"
										type="primary"
										size="medium"
										:style="
											!showLockLoan(scope.row, 2)
												? 'color:#c0c4cc;'
												: ''
										"
										:disabled="!showLockLoan(scope.row, 2)"
										@click="confirmLoan(scope.row, 2)"
									>
										{{ $t('funds.fund_audit.cancel_pay') }}
									</el-link>
									<el-link
										v-if="
											hasPermission('407018') &&
												scope.row.auditStatus === 14
										"
										type="primary"
										size="medium"
										:style="
											!showLockLoan(scope.row, 2)
												? 'color:#c0c4cc;'
												: ''
										"
										:disabled="!showLockLoan(scope.row, 2)"
										@click="
											refreshAuditStatus(
												scope.row.eventId
											)
										"
									>
										{{
											$t(
												'funds.fund_audit.refresh_withdraw_status'
											)
										}}
									</el-link>
									<el-link
										v-if="
											hasPermission('909300695') &&
												scope.row.auditStatus === 14
										"
										type="primary"
										size="medium"
										:style="
											!showLockLoan(scope.row, 2)
												? 'color:#c0c4cc;'
												: ''
										"
										:disabled="!showLockLoan(scope.row, 2)"
										@click="
											confirmRetryLoan(scope.row, 3)
										"
									>
										{{
											showRetryLoan(scope.row) ? $t(
												'funds.fund_audit.again_payout'
											) : ''
										}}
									</el-link>
									<el-link
										v-else
										type="primary"
										size="medium"
										:style="
											!showLockLoan(scope.row, 1)
												? 'color:#c0c4cc;'
												: ''
										"
										:disabled="!showLockLoan(scope.row, 1)"
										@click="confirmLoan(scope.row, 1)"
									>
										{{ $t('funds.fund_audit.confirm_pay') }}
									</el-link>
									<!-- <el-button
										type="success"
										size="medium"
										:disabled="
											scope.row.lockStatus !== 0 &&
												scope.row.lockAccount !== userName
										"
										@click="confirm(scope.row, true)"
									>
										出款通过
									</el-button>
									<el-button
										type="danger"
										size="medium"
										:disabled="
											scope.row.lockStatus !== 0 &&
												scope.row.lockAccount !== userName
										"
										@click="confirm(scope.row, false)"
									>
										出款拒绝
									</el-button> -->
								</template>
							</template>
						</el-table-column>

						<el-table-column
							prop="eventId"
							align="center"
							:label="$t('funds.order_no')"
							width="260"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									v-if="!!scope.row.eventId"
									:title="scope.row.eventId"
									:copy="copy"
								>
									{{ scope.row.eventId }}
								</Copy>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							v-if="activeName === '4'"
							prop="thirdOrderNo"
							align="center"
							min-width="260"
							:label="
								$t('funds.fund_audit.connect_three_order_no')
							"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									v-if="!!scope.row.thirdOrderNo"
									:title="scope.row.thirdOrderNo"
									:copy="copy"
								>
									{{ scope.row.thirdOrderNo }}
								</Copy>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="eventTime"
							align="center"
							:label="$t('funds.apply_time')"
							min-width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.eventTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							prop="userName"
							align="center"
							:label="$t('funds.proxy_name')"
							width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									v-if="scope.row.userName"
									:title="scope.row.userName"
									:copy="copy"
								>
									{{ scope.row.userName }}
								</Copy>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<!-- <el-table-column
							prop="realName"
							align="center"
							:label="$t('funds.proxy_real_name')"
							width="150"
						>
							<template slot-scope="scope">
								{{ scope.row.realName || '-' }}
							</template>
						</el-table-column> -->
						<el-table-column
							prop="merchantName"
							align="center"
							:label="$t('common.belong_merchant')"
							width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ scope.row.merchantName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							prop="walletType"
							align="center"
							:label="
								$t(
									'common.withdraw_money_wallet'
								)
							"
							min-width="90"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="scope.row.walletType === 17">
									{{ $t('common.cash_wallet') }}
								</span>
								<span v-else-if="scope.row.walletType === 21">
									{{ $t('common.earnings_wallet') }}
								</span>
								<span v-else>
									-
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="orderAmount"
							align="center"
							:label="
								$t('funds.fund_audit.order_withdraw_amount')
							"
							width="160"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										handleNumber(
											scope.row.symbolUsdt,
											scope.row.orderAmountUsdt
										)
									}}
								</span>
								<br />
								<span v-if="scope.row.withdrawType === 1">
									({{
										handleNumber(
											scope.row.symbolCny,
											scope.row.orderAmountCny
										)
									}})
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="isBig"
							align="center"
							:label="$t('funds.fund_audit.big_withdraw')"
							width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span
									:style="{
										color:
											Number(scope.row.bigWithdraw) === 1
												? 'red'
												: ''
									}"
								>
									{{
										Number(scope.row.bigWithdraw) === 1
											? $t('common.yes')
											: $t('common.no')
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="payType"
							align="center"
							:label="$t('funds.pay_type')"
							min-width="130"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="Number(scope.row.withdrawType) === 1">
									{{
										$t('funds.proxy_member_funds_record.brank_card')
									}}
								</span>
								<span v-else-if="Number(scope.row.withdrawType) === 2">
									{{
										$t('funds.proxy_member_funds_record.virtual_currency')
									}}
								</span>
								<span v-else-if="Number(scope.row.withdrawType) === 8">
									{{
										$t('common.bmh_name')
									}}
								</span>
								<span v-else-if="Number(scope.row.withdrawType) === 9">
									{{
										$t('common.yh_name')
									}}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.audit_status')"
							width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span :class="getAuditStatusClass(scope.row)">
									{{
										typeFilter(
											scope.row.auditStatus,
											'auditStatus'
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="lockTime"
							align="center"
							:label="$t('funds.fund_audit.lock_time')"
							min-width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="!!scope.row.lockTime">
									{{ scope.row.lockTime }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="audit1Operator"
							align="center"
							:label="$t('funds.fund_audit.lock_account')"
							width="220"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span v-if="!!scope.row.lockAccount">
									{{ scope.row.lockAccount }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="thirdOrderStatus"
							align="center"
							:label="
								$t('funds.fund_audit.third_withdraw_status')
							"
							width="120"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{
										scope.row.thirdOrderStatus === 0
											? '出款成功'
											: scope.row.thirdOrderStatus === 1
											? '出款失败'
											: scope.row.thirdOrderStatus === 2
											? '未知'
											: scope.row.thirdOrderStatus === 3
											? '处理中'
											: '-'
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="thirdRespCode"
							align="center"
							:label="
								$t('funds.fund_audit.third_bussiness_code')
							"
							width="120"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.thirdRespCode }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="thirdRespContent"
							align="center"
							:label="
								$t('funds.fund_audit.third_bussiness_desc')
							"
							width="120"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>
									{{ scope.row.thirdRespContent }}
								</span>
							</template>
						</el-table-column>
						<!-- <el-table-column
							v-if="activeName === '4'"
							key="thirdMessageStatus"
							align="center"
							:label="$t('funds.fund_audit.third_message_status')"
							width="150"
						>
							<template slot-scope="scope">
								<span
									:class="
										scope.row.thirdMessageStatus === 1
											? 'lockingRgba'
											: 'disableRgba'
									"
								>
									{{
										typeFilter(
											scope.row.thirdMessageStatus,
											'withdrawThirdMessageStatus'
										)
									}}
								</span>
							</template>
						</el-table-column> -->
					</el-table>
					<!-- 分页 -->
					<el-pagination
						v-if="
							hasPermission('407041') ||
								hasPermission('407042') ||
								hasPermission('407043') ||
								hasPermission('407044')
						"
						:current-page.sync="pageNum"
						class="pageValue"
						background
						layout="total, sizes,prev, pager, next, jumper"
						:page-size="pageSize"
						:page-sizes="pageSizes"
						:total="total"
						:pager-count="9"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					></el-pagination>
				</div>
				<el-empty
					v-else
					:description="$t('funds.jurisdiction_tip')"
				></el-empty>
			</template>
			<el-dialog
				:title="title"
				center
				:visible.sync="visible"
				width="630px"
				class="audit-confirm"
				destroy-on-close
				@before-close="closeDialog"
			>
				<el-form
					ref="form"
					:model="form"
					:inline="true"
					:rules="formRules"
					label-width="auto"
				>
					<el-form-item
						:label="`${$t('common.remark')}:`"
						prop="remark"
					>
						<el-input
							v-model="form.remark"
							clearable
							type="textarea"
							:maxlength="500"
							show-word-limit
							v-input="{ name: 'noEmpty' }"
							:autosize="{ minRows: 4, maxRows: 4 }"
							style="width: 380px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="ordertype != 11"
						:label="`${$t('funds.fund_audit.client_audit_desc')}:`"
						prop="clientAuditDesc"
					>
						<el-input
							v-model="form.clientAuditDesc"
							clearable
							type="textarea"
							:maxlength="500"
							show-word-limit
							:autosize="{ minRows: 4, maxRows: 4 }"
							style="width: 380px"
							v-input="{ name: 'noEmpty' }"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="visible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="openSeaMoonDialog(true)">
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</el-dialog>
		</main-content>
		<detail
			v-else
			:type="type"
			:rowData="rowData"
			:activeName="activeName"
			@goBack="goBack"
		></detail>
		<el-dialog
			:title="$t('funds.fund_audit.image_address')"
			:visible.sync="pictureDialogVisible"
			:destroy-on-close="true"
			class="imgCenter"
		>
			<div class="img-box">
				<img v-lazy="form.imgUrl" />
			</div>
		</el-dialog>
		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
		<AuditLoan
			:visible.sync="auditLoan.visible"
			:loading="auditLoan.loading"
			:auditResult="auditLoan.auditResult"
			@auditOne="auditOne"
			@closeGoogleKey="() => auditLoan = {}"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername, getUserInfo } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import SeaMoonDialog from '@/components/SeaMoon'
import AuditLoan from './components/AuditLoan'
import MainContent from '@/components/MainContent/index.vue'

const end = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}
const start = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}
export default {
	name: routerNames.agentWithdrawalReview,
	components: {
		detail: () => import('./components/detail'),
		SeaMoonDialog,
		AuditLoan,
		MainContent
	},
	mixins: [list],
	data() {
		// this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: ['reviewTab'],
			queryData: {},
			title: '',
			type: true,
			showDetail: false,
			visible: false,
			form: {
				remark: '',
				imgUrl: '',
				clientAuditDesc: ''
			},
			formTime: {
				time: [start(), end()]
			},
			rowData: {},
			row: {},
			ordertype: '',
			action: '',
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			userName: '',
			activeName: '-1',
			dataList: [],
			pictureDialogVisible: false,
			timeList: [],
			agentWithdrawalTimer: null,
			activeWithdrawal: this.$t('funds.fund_audit.no_reload'),
			seaMoon: {
				isAudit: false,
				visible: false,
				params: {}
			},
			userInfo: {},
			auditLoan: {
				visible: false,
				loading: false,
				auditResult: 0,
				eventId: 0
			}
		}
	},
	computed: {
		lockOrderType() {
			return this.globalDics.lockStatus || []
		},
		withdrawThirdMessageStatus() {
			return this.globalDics.withdrawThirdMessageStatus || []
		},
		formRules() {
			const remarklimit = (rule, value, callback) => {
				if (this.ordertype === 11 && value === undefined) {
					callback(
						new Error(this.$t('funds.fund_audit.form_rules_tip3'))
					)
				} else if (this.ordertype !== 11 && value === undefined) {
					callback(
						new Error(this.$t('funds.fund_audit.form_rules_tip4'))
					)
				} else {
					callback()
				}
			}
			const remark = [
				{
					required: true,
					validator: remarklimit,
					message: '',
					trigger: 'blur'
				}
			]
			return {
				remark
			}
		},
		fileSize() {
			return 2 * 1024 * 1024
		},
		uploadAPI() {
			return this.$api.agentImageUploadAPI
		}
	},
	created() {
		if (
			this.hasPermission('407041') ||
			this.hasPermission('407042') ||
			this.hasPermission('407043') ||
			this.hasPermission('407044')
		) {
			this.getKvconfigList()
		}
	},
	mounted() {
		if (this.hasPermission('407041')) {
			this.activeName = '1'
		} else if (this.hasPermission('407042')) {
			this.activeName = '2'
		} else if (this.hasPermission('407043')) {
			this.activeName = '3'
		} else if (this.hasPermission('407044')) {
			this.activeName = '4'
		} else {
			this.activeName = '-1'
		}
		this.userName = getUsername()
		this.userInfo = getUserInfo()
		this.loadData()
	},
	activated() {
		if (
			Number(this.activeWithdrawal) &&
			(this.hasPermission('407041') ||
				this.hasPermission('407042') ||
				this.hasPermission('407043') ||
				this.hasPermission('407044'))
		) {
			this.agentWithdrawalTimer = setInterval(
				this.loadData,
				this.activeWithdrawal * 1000
			)
		} else {
			clearInterval(this.agentWithdrawalTimer)
		}
	},
	deactivated() {
		clearInterval(this.agentWithdrawalTimer)
	},
	beforeDestroy() {
		clearInterval(this.agentWithdrawalTimer)
		this.agentWithdrawalTimer = null
	},
	methods: {
		// 再次出款
		againPayout(eventId, operator, operatorId = '', googleVerifyCode) {
			const params = {
				eventId,
				operator,
				operatorId,
				googleVerifyCode
			}
			this.$api
				.proxyAgainPayoutApi(params)
				.then((res) => {
					if (res.code === 200) {
						this.dialogData = res?.data || []
						this.total = res?.data?.totalRecord || 0
					}
				})
		},
		getAuditStatusClass(rowData) {
			let className = 'normalRgba'
			if (rowData.auditStatus === 11) {
				// 出款成功
				className = 'deleteRgba'
			} else if (rowData.auditStatus === 13) {
				// 出款失败
				className = 'failRgba'
			} else if (rowData.auditStatus === 12) {
				// 出款取消
				className = 'rejectRgba'
			} else if (rowData.auditStatus === 7) {
				// 待出款
			} else if (Number(rowData.lockStatus) === 1) {
				// 锁单处理中
				className = 'lockingRgba'
			}
			return className
		},
		isFinishAuditStatus(rowData) {
			let flag = false
			const finishStatusArr = [11, 12, 13] // 最终状态
			if (finishStatusArr.indexOf(rowData.auditStatus) > -1) {
				flag = true
			}
			return flag
		},
		showLockLoan(rowData, auditResult) {
			let flag = false
			if (this.userName === rowData.lockAccount) {
				if (rowData.auditStatus === 14 && auditResult === 2) {
					flag = true
				} else if (
					rowData.auditStatus !== 14 &&
					rowData.lockStatus === 1
				) {
					flag = true
				}
			}
			return flag
		},
		showRetryLoan(rowData) {
			const { withdrawType, thirdRespCode } = rowData || {}
			// 白马会
			if (withdrawType === 8) {
				if ([50029, 50030].indexOf(thirdRespCode) > -1) {
					return true
				}
			}
			// 易换
			if (withdrawType === 9) {
				if ([41003].indexOf(thirdRespCode) > -1) {
					return true
				}
			}
			return false
		},
		showLock(rowData) {
			let flag = false
			if (this.activeName === '4') {
				// 14为出款中,不能再锁单和确认出款 或者为7才可以审核和锁单
				if (rowData.auditStatus === 14) {
					flag = false
				} else if (
					rowData.auditStatus === 7 &&
					rowData.lockStatus === 0
				) {
					flag = true
				} else if (
					rowData.lockStatus === 1 &&
					this.userName === rowData.lockAccount
				) {
					flag = true
				}
			} else {
				if (rowData.lockStatus === 0) {
					flag = true
				} else if (
					rowData.lockStatus === 1 &&
					this.userName === rowData.lockAccount
				) {
					flag = true
				}
			}
			return flag
		},
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		onSeaMoonValidSucceed(data) {
			if (this.seaMoon.isAudit) {
				this.auditOne()
			}
		},
		openSeaMoonDialog(isAudit) {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.auditOne()
				}
			})
		},
		search() {
			this.pageNum = 1
			clearInterval(this.agentWithdrawalTimer)
			this.agentWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.agentWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		recordTime(val) {
			this.activeWithdrawal = val
			if (Number(val)) {
				clearInterval(this.agentWithdrawalTimer)
				this.agentWithdrawalTimer = setInterval(
					this.loadData,
					val * 1000
				)
			} else {
				clearInterval(this.agentWithdrawalTimer)
			}
		},
		closeDialog() {
			this.form.remark = undefined
			this.form.imgUrl = ''
			this.$refs.upload.clearFiles()
		},
		getKvconfigList() {
			this.timeList = []
			let str = ''
			let arr = []
			const params = {
				k: 'funds.audit.pagerefresh.interval.config',
				pageNum: 1,
				pageSize: 10
			}
			this.$api.getkvconfigQueryList(params).then((res) => {
				if (res.code === 200 && res.data) {
					const val = res.data.records[0] || []
					if (val.v) {
						str = val.v
						arr = str.split(',').sort()
						arr.forEach((item, index) => {
							const obj = {}
							if (Number(item) === 0) {
								obj.label = this.$t(
									'funds.fund_audit.no_reload'
								)
								obj.value = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.timeList.push(obj)
								this.activeWithdrawal = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.agentWithdrawalTimer = null
							} else if (Number(item)) {
								obj.label =
									item + this.$t('funds.fund_audit.second')
								obj.value = item
								this.timeList.push(obj)
							}
							// if (Number(item) && index === 1) {
							// 	this.activeWithdrawal = item
							// 	this.agentWithdrawalTimer = setInterval(
							// 		this.loadData,
							// 		item * 1000
							// 	)
							// }
						})
					}
				}
			})
		},
		handleClick() {
			this.search()
		},
		loadData() {
			const [startTime, endTime] = this.formTime.time || []
			let params = {
				...this.queryData,
				thirdMsgStatus:
					this.activeName === '4'
						? this.queryData.thirdMsgStatus
						: undefined,
				eventTimeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				eventTimeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			let type = ''
			if (this.activeName === '1') {
				type = 'proxyselectMemberWithDrawAuthEsPageOne'
			} else if (this.activeName === '2') {
				type = 'proxyselectMemberWithDrawAuthEsPageTwo'
			} else if (this.activeName === '3') {
				type = 'proxyselectMemberWithDrawAuthEsPageThree'
			} else if (this.activeName === '4') {
				type = 'proxySelectMemberWithDrawAuthEsPagePay'
			} else {
				return
			}
			this.loading = true
			this.dataList = []
			this.$api[type](params)
				.then((res) => {
					if (res.code === 200) {
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						const response = res.data
						this.loading = false
						this.dataList = response.record || []
						if (this.dataList.length > 0) {
							this.dataList.forEach((item) => {
								item.lockOrder = Number(item.lockStatus) === 1
							})
						}
						this.total = response.totalRecord
					} else {
						this.loading = false
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		isMyAudit(rowData) {
			return (
				rowData.lockStatus === 1 &&
				this.userName === rowData.lockAccount
			)
		},
		goDetail(row) {
			// this.type =
			// 	(!!row.lockAccountId &&
			// 		this.userInfo.id === +row.lockAccountId) ||
			// 	(!row.lockAccountId && row.lockAccount === this.userName)
			this.type = this.isMyAudit(row)
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.showDetail = false
			this.loadData()
			// this.dataList = []
			// this.search()
			// setTimeout(() => {
			// 	this.search()
			// }, 1000)
		},
		// confirm(row, type, ordertype) {
		// 	this.row = row
		// 	this.action = type
		// 	this.ordertype = ordertype
		// 	console.log(row, type, ordertype)
		// 	this.$confirm(this.$t('funds.fund_audit.confirm_title'), {
		// 		confirmButtonText: this.$t('common.confirm'),
		// 		cancelButtonText: this.$t('common.cancel'),
		// 		type: 'warning'
		// 	})
		// 		.then(() => {
		// 			this.form.remark = ''
		// 			this.form.clientAuditDesc = ''
		// 			this.form.imgUrl = ''
		// 			this.visible = true
		// 			if (this.ordertype === 11) {
		// 				this.title = this.$t('funds.fund_audit.confirm_pay')
		// 			} else {
		// 				this.title = this.$t('funds.fund_audit.cancel_pay')
		// 			}
		// 		})
		// 		.catch(() => {})
		// },
		confirmLoan(row, auditResult) {
			this.auditLoan = {
				visible: true,
				loading: true,
				auditResult: auditResult,
				eventId: row.eventId
			}
		},
		confirmRetryLoan(row, auditResult) {
			this.auditLoan = {
				visible: false,
				loading: true,
				auditResult: auditResult,
				eventId: row.eventId,
				operator: row.lockAccount
			}
		},
		auditOne(params) {
			// const params = {
			// 	// id: this.row.id,
			// 	eventId: this.row.eventId,
			// 	auditDesc: this.form.remark || '',
			// 	auditResult: this.action ? 1 : 2,
			// 	orderStatus: this.ordertype ? 11 : 12,
			// 	clientAuditDesc: this.form.clientAuditDesc || ''
			// }
			if (params.auditResult === 3) {
				const {eventId, operator} = this.auditLoan
				const { googleVerifyCode } = params
				this.auditLoan = {}
				return this.againPayout(eventId, operator, '', googleVerifyCode)
			}
			params.eventId = this.auditLoan.eventId
			params.auditType = Number(this.activeName)

			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.memberWithDrawProxyUpdateWithdraw(params)
				.then((res) => {
					if (res?.code === 200) {
						// this.visible = false
						loading.close()
						this.auditLoan.visible = false
						this.$message({
							message: this.$t('common.action_success'),
							type: 'success'
						})
						this.search()
						// setTimeout(() => {
						// 	this.search()
						// }, 1000)
					}
				})
				.catch(() => {
					loading.close()
				})
		},

		reset() {
			this.queryData = {
				eventId: '',
				lockStatus: ''
			}
			this.formTime = {
				time: [start(), end()]
			}
			this.search()
		},
		reloadTime() {
			this.formTime = {
				time: [start(), end()]
			}
		},
		handleCurrentChange(val) {
			this.pageNum = val
			clearInterval(this.agentWithdrawalTimer)
			this.agentWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.agentWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		handleSizeChange(val) {
			this.pageSize = val
			clearInterval(this.agentWithdrawalTimer)
			this.agentWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.agentWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		lockChange(val) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.memberWithDrawProxyUpdateWithdrawLock({
					auditType: Number(this.activeName),
					eventId: val.eventId,
					lockStatus: Number(val.lockStatus) === 1 ? 0 : 1
				})
				.then((res) => {
					if (res?.code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.search()
						// setTimeout(() => {
						// 	this.search()
						// }, 1000)
					} else {
						loading.close()
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					val.lockOrder = false
					loading.close()
				})
		},
		refreshAuditStatus(id) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.proxyWithDrawUserRefreshOrderStatus({
					eventId: id
				})
				.then((res) => {
					if (res?.code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.search()
					} else {
						loading.close()
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
					this.loadData()
				})
				.catch(() => {
					loading.close()
					this.$message({
						message: '服务异常',
						type: 'error'
					})
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.divBox {
	display: flex;
	.el-select {
		width: 100px;
	}
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
	line-height: 28px;
	margin-right: 20px;
}
::v-deep .el-form-item__error {
	left: 0;
}
.remakeBox {
	width: 250px;
	position: absolute;
	left: 200px;
	bottom: 0;
	line-height: 20px;
}
.failRgba {
	min-width: 60px;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	display: inline-block;
	border-radius: 5px;
	font-size: 14px;
	color: #f46868;
	margin-top: 2px;
	margin-bottom: 2px;
	text-align: center;
	background: rgba(88, 163, 247, 0.3);
}
.rejectRgba {
	min-width: 60px;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	display: inline-block;
	border-radius: 5px;
	font-size: 14px;
	color: #7f7f7f;
	margin-top: 2px;
	margin-bottom: 2px;
	text-align: center;
	background: rgba(88, 163, 247, 0.3);
}
</style>
